<template>
	<view>
		<navNav :navobj="navobj"></navNav>
		<view class="tabBar">
			<view :class="actIndex===0?'actTab':''" @click="actIndex=0" class="tab">反馈内容</view>
			<view :class="actIndex===1?'actTab':''" @click="actIndex=1" class="tab">我的反馈</view>
		</view>
		<view class="feedbackBox" v-if="actIndex === 0">
			<view class="title">反馈问题类型</view>
			<view class="tagsBox">
				<view class="tag" v-for="(item,index) in tags" :key="index" :class="index === form.title?'act':''"
					@click="form.title = index">{{item}}</view>
			</view>
			<view class="content">
				<uni-easyinput type="textarea"></uni-easyinput>
			</view>
			<uni-easyinput v-model="form.phone" placeholder="联系方式"></uni-easyinput>
			<view class="title" style="margin-top: 10px;">截图或者图片（选填）</view>
			<view class="imgBox">
				<view @click="addImg" class="imgUp">
					<uni-icons size="25" type="camera-filled"></uni-icons>
				</view>
				<image class="img" mode="aspectFill" v-for="(item,index) in imgList" :key="index" :src="item"></image>
			</view>
			<view class="buttonBox" @click="feedback">提交反馈</view>
		</view>
		<view class="listBox" v-if="actIndex === 1 ">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="title">{{item.title.name}}</view>
				<view class="imgBox">
					<image class="img" v-for="(itemImg,indexImg) in JSON.parse(item.image)"  :key="indexImg" mode="aspectFill" :src="itemImg"></image>
				</view>
				<view class="content">{{item.content}}</view>
				<view class="time">{{item.createTime}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const {user,balance} = storeToRefs(userStores);//解构数据
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'我的反馈',
				image:true
	})
	const actIndex=ref(0)
	const tags=ref( ['服务类目不合理', '体验问题', '其它', '功能异常'])
	const list=ref([])
	const form = reactive({
		title: 0,
		content: '',
		image: '',
		phone: ''
	})
	const imgList=ref([])
	
	
	onLoad(()=>{
		getData()
	})
			
	const upImg=async(data)=>{
		const result = await proxy.$api.upImg(data)
		if(result.code==200){
			imgList.value.push(result.data.url)
		}
	}
		
	const addImg=()=> {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				var data = {
					file: res.tempFilePaths[0]
				}
				upImg(data)
			}
		})
	}
	const feedback=async()=>{
		var data = form
		data.image = JSON.stringify(imgList.value)
		const result = await proxy.$api.feedback(data)
		if(result.code==200){
			uni.showToast({
				title:'反馈成功',
				icon:'none'
			})
		}else{
			uni.showToast({
				title:result.msg,
				icon:'none'
			})
		}
	}
	const getData=async()=>{
		const result = await proxy.$api.MyFeedback()
		if(result.code==200){
			list.value = result.data
		}
	}

</script>

<style lang="scss" scoped>
	.listBox{
		.item{
			background-color: white;
			margin: 10px;
			padding: 10px;
			.title{
				font-weight: bold;
			}
			.content{
				padding: 10px;
				margin: 10px 0px;
				background-color: $MainBackColor;
				font-size: 14px;
			}
			.imgBox{
				display: flex;
				align-items: center;
				.img{
					width: 40px;
					height: 40px;
				}
			}
			.time{
				font-size: 14px;
				color: $grey;
			}
		}
	}
	
	.imgBox {
		display: flex;
		flex-wrap: wrap;
	
		.imgUp {
			background-color: $backGrey;
			width: calc((100vw - 80px) / 4);
			height: calc((100vw - 80px) / 4);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			margin: 5px;
		}
	
		.img {
			width: calc((100vw - 80px) / 4);
			height: calc((100vw - 80px) / 4);
			margin: 5px;
		}
	}
	
	.feedbackBox {
		padding: 20px;
		background-color: white;
		margin: 10px 0px;

		.imgs {
			display: flex;
			align-items: center;
			margin-top: 10px;

			.img {
				height: 50px;
				width: 50px;
			}
		}

		.content {
			padding: 10px 0;
		}

		.tagsBox {
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid $shollowGrey;
			padding-bottom: 10px;

			.tag {
				padding: 3px 5px;
				font-size: 14px;
				border: 1px solid rgba(0, 0, 0, 0.1608);
				border-radius: 5px;
				margin-top: 10px;
				margin-right: 10px;
			}

			.act {
				border: 1px solid $blue;
			}
		}
	}

	.tabBar {
		display: flex;
		align-items: center;
		background-color: white;
		padding: 0px 20px;

		.tab {
			padding: 20px 0px;
			width: 50%;
			font-weight: bold;
			box-sizing: border-box;
			text-align: center;
		}

		.actTab {
			color: $blue;
			border-bottom: 2px solid $blue;
		}
	}

	.buttonBox {
		position: fixed;
		bottom: 0px;
		left: 0px;
		background-color: $blue;
		color: white;
		padding: 10px;
		width: calc(100vw - 60px);
		margin: 20px;
		text-align: center;
		border-radius: 20px;
	}



	body {
		background-color: $MainBackColor;
	}
</style>